<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: "家用电器" },
    { value: 27, name: "户外运动" },
    { value: 24, name: "汽车用品" },
    { value: 23, name: "手机数码" },
  ];
  const testDimensions = ["name", "value"];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    tooltip: {},
    animation: false,
    grid: {
      top: "25%",
      bottom: "16%", //也可设置left和right设置距离来控制图表的大小
      left: "5%",
      right: "5%",
    },
    xAxis: {
      data: [1, 2, 3, 4],
      axisLine: {
        show: true, //隐藏X轴轴线
        lineStyle: {
          color: "rgba(10,71,62,0.2)",
        },
      },
      axisTick: {
        show: false, //隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,

        color: "rgba(0,0,0,1)", //X轴文字颜色
      },
    },
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        // min: min1,
        // max: max1,
        // interval: (max1 - min1) / 4,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
          },
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,

          color: "#333", //X轴文字颜色
        },
      },
      {
        name: "%",
        type: "value",
        gridIndex: 0,
        // min: min2,
        // max: max2,
        // interval: (max2 - min2) / 4,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
            width: 1,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(233,242,241,1)",
          },
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,

          color: "#333", //X轴文字颜色
        },
      },
    ],
    legend: {
      top: "5%",
      data: ["总数", "越限"],
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 20,
    },
    series: [
      {
        name: "总数",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          color: "#E8F8F5",
          borderColor: "#22B7A0",
        },
        data: [10, 10, 10, 10],
        z: 10,
        zlevel: 0,
      },
      {
        name: "越限",
        type: "bar",
        barWidth: 15,
        barGap: "-100%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(34,183,160,1)",
            },
            {
              offset: 1,
              color: "rgba(29,218,182,1)",
            },
          ]),
        },
        data: [2, 3, 4, 6],
        z: 11,
        zlevel: 1,
      },
    ],
  };
});
</script>